<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
<div id="app" class="active">
  <h1>
    <button @click="click">按钮</button>
    <ul>
      <li v-for="item in arr" :key="item">{{item}}</li>
    </ul>
  </h1>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      arr: ['中国', '70', '周年', '庆典']
    },
    methods: {
      click() {
        //响应式的
        // this.arr.push('祝贺');
        // this.arr.push('祝贺','庆祝','恭喜');后面增加
        // this.arr.pop();后面删除
        // this.arr.shift();前面删除
        // this.arr.unshift('祝贺','庆祝','恭喜');前面增加
        // this.arr.splice(1,0,60);第二个参数为零时，代表增加。
        // this.arr.splice(1,1,60);第二个参数不为零时，代表替换。
        // this.arr.splice(1,2);第三个参数没有值时，代表删除，且删除的个数是第二个参数，至于第一个参数，则是代表从哪开始。
        // this.arr.sort();排序
        // this.arr.reverse();翻转

        //这个也是响应式的，并且它还是Vue自带的一个功能。
        Vue.set(this.arr,0,'华夏');

        //非响应式的。
        // this.arr[4]='华夏';
      }
    }
  })
</script>
</body>
</html>